#watches {
	@include flex(1 1);
	@include flexbox(row, center, null, wrap);
	padding: 2px;
}
.watch {
	padding: 1px 2px;
	min-width: 25px;
	margin: 2px 4px;
	font-size: 0.8em;
	cursor: pointer;
	@include flexbox(row);
	text-decoration: none;
	color: inherit;
	position: relative;
	background: $watch-bg;
	&:hover {
		background: $open-watch-bg;
	}
	&.open {
		box-shadow: 0 0 5px black;
	}
	&.open::after {
		position: absolute;
		left:0; top: 13px; right: 0;
		height: 12px; // hack dégueulasse
		background: $open-watch-bg;
		z-index: 60;
		content: "";
	}
	.count:not(:empty) {
		color: $watch-count-color;
		background: $watch-count-new-bg;
		padding: 0 5px;
		display: inline-block;
		&.ping {
			background: $watch-count-ping-bg;
		}
	}
	.name {
		padding: 0 3px;
		overflow: hidden;
		max-width: 75px;
		display: inline-block;
		white-space: nowrap;
		text-overflow: ellipsis;
		&.dialog-room::before {
			font-family: "fontello";
			font-size: .85em;
			content: "\e82f";
			margin-right: 2px;
			margin-top: -2px;
		}
		&.compact {
			max-width: 40px;
		}
	}
	.watch-panel {
		position: absolute;
		background: $watch-panel-bg;
		min-height: 20px;
		box-shadow: 0 0 5px black;
		padding: 10px;
		z-index: 55;
	}
	.watch-panel-top { // inside watch-panel
		height: 25px;
		@include flexbox(row, center, space-between);
		margin-bottom: 5px;
		span {
			@include flex(1 0);
			text-align: center;
			font-weight: bold;
		}
	}
	.messages { // inside watch-panel
		max-height: 50vh;
		overflow-y: auto;
		.opener {
			display: none;
		}
		.nminfo {
			padding-right: 2px;
		}
		.message:last-child .nminfo {
			font-weight: bold;
			opacity: 1;
		}
		.message.unseen {
			background: $unseen-message-bg; 
		}
	}
}
